<template>
	<view> 
		 <!--判断用户是否第一次登录-->

			<view class="header">
				<image class="logo" src="../../static/work.jpg" mode="heightFix"></image>
				<text>西电职达</text>
			</view>
			
			<view class="content">
				<view>申请获取以下权限</view>
				<text>获得你的公开信息（昵称，头像，地区等）</text>
			</view>
			
<!-- 			<button class="bottom" type="primary" open-type="getUserInfo" 
			lang="zh_CN" withCredentials="true" @getuserinfo="getUserInfo">
			一键登录</button> -->	
			<button v-if="!hasUserInfo" hover-class="none" @tap="getUserProfile" class="bottom" type="primary">微信登录</button>
<!-- 			<block v-else>
				<image :src="userInfo.avatarUrl" class="userinfo-avatar"/>
				<open-data class="userinfo-nickname" type="userNickName"></open-data>
			</block> -->
			<!-- <button v-else hover-class="none" open-type="getUserInfo" @getuserinfo="setUserInfo" class="bottom" type="primary">微信登录</button> -->
	</view>

</template>

<script>
import {mapState,mapActions} from 'vuex'; 
	export default {
		computed: {
			...mapState(['userInfo','hasLogin']),
		},
		data() {
			return {
				hasUserInfo: false,//是否授权登录
				//userInfo: null,
				canUseGetUserProfile: true,
				code:'',
				//userInfo:'',
			}
		},
	/* 	onLoad() {
		  // 页面加载时使用用户授权逻辑，弹出确认的框  
		  this.userAuthorized()
		}, 
			onLoad() {
		    //判断是否存在getUserProfile方法
		    if (uni.getUserProfile) {
		      this.setData({
		        canUseGetUserProfile: true
				
		      })
		    }
		}, */
			methods: {
				/* userAuthorized() {
								  let that = this;
								// 查看是否授权
				  uni.getSetting({
				    success: data => {
									  //判断是否授权
				      if (data.authSetting['scope.userInfo']) {
				        uni.getUserInfo({
				          success: data => {
				              that.hasUserInfo = true,
				              that.userInfo = data.userInfo,
							  that.getUserProfile(data.userInfo)
				          }
				        })
				      } else {//null或者是false,表示没有授权，显示授权按钮
				        that.hasUserInfo=false
				      }
				    },
								  fail: function(error) {
									console.log(error);
								  }
				  })
				}, */
					getUserProfile() {
						var that=this
					    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
					    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
						uni.login({
						  success: function(login_res) {
							  console.log(login_res.code),
							  that.code=login_res.code
							 }
						})
					    uni.getUserProfile({
					      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					      success: (info_res) => {
					        //业务逻辑
							console.log(info_res)
							      // 小程序通过uni.request()发送code到开发者服务器
								  uni.request({
								  url: 'https://hotenergy.club/workapp/user/login',
								  method: 'POST',
								  header: {
									'content-type': 'application/x-www-form-urlencoded',
								  },
								  data: {
									code: that.code, //临时登录凭证
									rawData: info_res.rawData, //用户非敏感信息 昵称头像
									signature: info_res.signature, //签名
									encrypteData: info_res.encryptedData, //用户敏感信息
									iv: info_res.iv //解密算法的向量
								  },
								  
								  success: function(res) {
									  // 全局存储
									  console.log(res)
									  console.log(info_res.rawData)
									  that.$store.state.userInfo=info_res.rawData
									 /*  that.$store.state.hasLogin=true */
									  uni.reLaunch({url: '/pages/home/home'});
									 ///改
								  },
								  fail: function(error) {
									//调用服务端登录接口失败
									console.log(error);
								  }
								})
								//that.hasUserInfo= true,
								//that.userInfo = userInfo
							    },
								fail: function(error) {
									//用户拒绝授权
									uni.reLaunch({url: '/pages/login/login'});
								}
							  })

						}}
	}
</script>

<style>
.header{
	position:relative;//定位方式,相对定位
	margin: 90rpx 0 50rpx 50rpx;
	width: 650rpx;
	height: 320rpx;
	display: flex;//flex容器
	flex-direction: column;//元素按列排
	align-items: center;//元素位于容器的中心。
	border-bottom: 1px solid #ccc;//下边框:宽 样式 颜色
}
.header text{
	margin-top: 40rpx;//与上面元素距离
}
.logo{//图片大小
	heightFix: 160rpx;
}
.content{
	margin-left: 50rpx;
	margin-bottom: 90rpx;
}
.content text{
	display: block;
	color: #9d9d9d;
	margin-top: 40rpx;
}
.bottom{
	margin: 70rpx 50rpx;
	font-size: 35rpx;
	
}
</style>
